<template>
    <div class="container">
      <h1>新闻发布</h1>
      <form id="newsForm" @submit.prevent="submitForm">
        <div class="form-group">
          <label for="news_title" class="required">新闻标题</label>
          <input type="text" id="news_title" v-model="formData.news_title" required>
        </div>
  
        <div class="form-row">
          <div class="form-group">
            <label for="category">分类</label>
            <select id="category" v-model="formData.category">
              <option value="政治">政治</option>
              <option value="经济">经济</option>
              <option value="科技">科技</option>
              <option value="体育">体育</option>
              <option value="娱乐">娱乐</option>
              <option value="社会">社会</option>
              <option value="国际">国际</option>
            </select>
          </div>
  
          <div class="form-group">
            <label for="pic_href">封面图片URL</label>
            <input type="text" id="pic_href" v-model="formData.pic_href" placeholder="https://example.com/image.jpg">
          </div>
  
          <div class="form-group">
            <label for="keywords">关键词(用/分隔)</label>
            <input type="text" id="keywords" v-model="formData.keywords" placeholder="例如: 科技/人工智能/创新">
          </div>
        </div>
  
        <div class="form-group">
          <label for="news_detail" class="required">新闻详情</label>
          <textarea 
            id="news_detail" 
            v-model="formData.news_detail" 
            @input="adjustTextareaHeight"
            required
          ></textarea>
        </div>
  
        <div class="form-group">
          <button type="submit" class="btn-submit">发布新闻</button>
        </div>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    name: "Publish",
    components: {},
    data() {
      return {
        formData: {
          news_title: '',
          category: '政治',
          pic_href: '',
          keywords: '',
          news_detail: '',
          userAccount: ''
        }
      }
    },
    mounted() {
      this.initTextareaHeight();
    },
    methods: {
      initTextareaHeight() {
        const textarea = document.getElementById('news_detail');
        textarea.style.height = '600px';
      },
      adjustTextareaHeight(event) {
        const textarea = event.target;
        textarea.style.height = 'auto';
        textarea.style.height = (textarea.scrollHeight > 600 ? textarea.scrollHeight : 600) + 'px';
      },
      submitForm() {
        console.log('提交的数据:', this.formData);
        this.formData.userAccount = this.$store.state.user.userAccount
        this.$api.serviceUser.post('api/user/publisherNews', this.formData, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        .then(response => {
          if (response.data.code == 200){
          }
        })
        .catch(error => {
          console.error('失败', error);
        });

        this.$centerMessage({
          message: '新闻提交成功，等待审核',
          type: 'success'
        });

        this.resetForm();
      },
      resetForm() {
        this.formData = {
          news_title: '',
          category: '政治',
          pic_href: '',
          keywords: '',
          news_detail: ''
        };
        this.$nextTick(() => {
          this.initTextareaHeight();
        });
      }
    }
  }
  </script>
  
  <style scoped>
  body {
    font-family: 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
  }
  .container {
    max-width: 767px;
    margin: 20px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  h1 {
    text-align: center;
    color: #ff4d4f;
    margin-bottom: 25px;
    font-size: 26px;
    font-weight: 600;
  }
  .form-group {
    margin-bottom: 20px;
  }
  .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .form-row .form-group {
    flex: 1;
    min-width: 150px;
    margin-bottom: 0;
  }
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
  }
  input[type="text"],
  input[type="url"],
  select,
  textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s;
  }
  input[type="text"]:focus,
  input[type="url"]:focus,
  select:focus,
  textarea:focus {
    border-color: #d9d9d9;
    box-shadow: none;
    outline: none;
  }
  textarea {
    min-height: 600px;
    resize: none;
    overflow-y: hidden;
    line-height: 1.5;
  }
  .btn-submit {
    background-color: #ff4d4f;
    color: white;
    padding: 12px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    transition: all 0.3s;
    margin-top: 8px;
  }
  .btn-submit:hover {
    background-color: #ff7875;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
  }
  .btn-submit:active {
    transform: translateY(0);
  }
  .required:after {
    content: " *";
    color: #ff4d4f;
  }
  select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
  }
  
  @media (max-width: 600px) {
    .container {
      padding: 20px;
      margin: 10px auto;
    }
    .form-row {
      flex-direction: column;
      gap: 15px;
    }
    .form-row .form-group {
      min-width: 100%;
    }
    textarea {
      min-height: 400px;
    }
  }
  </style>